<template>
  <el-dialog
      v-model="dialogVisible"
      :before-close="handleBeforeClose"
      :close-on-click-modal="false"
      :show-close="false"
      width="45%"
  >
    <div class="header" style="text-align: center;">
      <p style="font-size: 26px;line-height: 16px;font-weight: bold">请确认以下事项</p>
    </div>
    <div v-for="(item, index) in contentList" :key="index" class="content-item">
      <p v-if="index < contentList.length - 1">{{ item }}</p>
      <p v-if="index === contentList.length - 1" class="last-item">
        {{ item }}
      </p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="disableButtons" type="primary" @click="handleConfirm">
        {{ countdown > 0 ? '我已知晓 ' + countdown : '我已知晓' }}
      </el-button>
      <el-tooltip content="你认真的？" effect="dark" placement="top">
        <el-button :disabled="disableButtons" type="danger" @click="handleDisagree">
          {{ countdown > 0 ? '我不同意 ' + countdown : '我不同意' }}
        </el-button>
      </el-tooltip>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      contentList: [
        "1.请不要创建重复内容，创建前请先自行搜索相关内容是否已经存在",
        "2.请不要创建已停用/未开业/未确认/邀请制/私人制的内容",
        "3.除“舞萌/中二”相关条目以外，请不要创建天津理工大学以外的条目",
        "4.禁止输入任何含有色情/涉政/粗俗/暴力等的语句",
        "如果提交了类似信息，管理员核查后会删除相应条目，情节严重的会考虑封禁或删除账号"
      ],
      disableButtons: true, // 初始禁用按钮
      countdown: 3, // 倒计时初始值
      countdownInterval: null, // 用于存储倒计时的定时器
    };
  },
  mounted() {
    this.openDialog();
    this.startCountdown();
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
      setTimeout(() => {
        this.disableButtons = false; // 3秒后启用按钮
      }, 3000);
    },
    handleBeforeClose(done) {
      done();
    },
    handleConfirm() {
      this.dialogVisible = false;
    },
    handleDisagree() {
      this.dialogVisible = false;
      // 跳转到/home
      this.$router.push('/home');
    },
    startCountdown() {
      this.countdownInterval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.countdownInterval); // 停止倒计时
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    // 清理定时器，防止内存泄漏
    if (this.countdownInterval) {
      clearInterval(this.countdownInterval);
    }
  }
};
</script>

<style scoped>
.content-item {
  margin-bottom: 10px;
}

.content-item p {
  font-size: 18px;
  line-height: 24px;
}

.last-item {
  text-align: center;
  font-weight: bold;
  color: red;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end; /* 按钮靠右显示 */
}
</style>